<template>
  <div class="app-container">

    <!-- 查询条件 -->
    <el-form size="small" :inline="true" :model="queryParam" class="demo-form-inline">
      <el-form-item label="登录账户">
        <el-input v-model="queryParam.loginid" placeholder="登录账户" />
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="queryParam.gender" clearable placeholder="性别">
          <el-option
            v-for="item in sexList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="queryParam.status" clearable placeholder="状态">
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="btnSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.rows" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="loginid" label="账户" width="180" />
      <el-table-column prop="userName" label="昵称" width="180" />
      <el-table-column  label="性别" width="180" >
         <template slot-scope="scope">
                <el-tag   type='primary' v-if="scope.row.gender===1"  >男</el-tag>
                <el-tag   type='success' v-else  >女</el-tag>
              </template>
      </el-table-column>

      <el-table-column  label="状态" width="180" >
         <template slot-scope="scope">
                <el-tag   type='primary' v-if="scope.row.status===1"  >正常</el-tag>
                <el-tag   type='danger' v-else  >停用</el-tag>
              </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />

    </el-table>

    <!-- 分页条 -->
    <el-pagination
      v-if="tableData.total>0"
      :current-page="queryParam.page"
      :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParam.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>
import { commonDataApi } from '@/api/commonData.js'
import { dataListApi } from '@/api/constmer.js'
export default {
  data() {
    return {
      sexList: [],
      stateList: [],
      queryParam: {
        page: 1,
        size: 10
      },
      tableData: {
        total: 0,
        rows: []
      }
    }
  },
  created() {
    this.fetchCommonData()
    this.fetchData()
  },
  methods: {
    fetchCommonData() {
      commonDataApi().then(resp => {
        this.sexList = resp.data.sexData
        this.stateList = resp.data.stateData
      })
    },
    fetchData() {
      dataListApi(this.queryParam).then(resp => {
        this.tableData = resp.data
      })
    },
    handleSizeChange(val) {
      // 每页几笔
      this.queryParam.page = 1
      this.queryParam.size = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryParam.page = val
      this.fetchData()
    },
    btnSearch() {
      this.queryParam.page = 1
      this.fetchData()
    }
  }
}
</script>

<style>
</style>
